<template>
  <div class="home">
    <BlogPost v-if="!user" :post="welcomeScreen"/>
    <BlogPost v-for="(post,index) in blogPostsFeed" :key="index" :post="post"/>
    <div class="blog-card-wrap">
      <div class="container">
        <h3>{{blogPostsCards.length ? '查看更多的博客':'快去写一篇博客吧'}}</h3>
        <div class="blog-cards">
          <BlogCard v-for="(post,index) in blogPostsCards" :key="index" :post="post"/>
        </div>
      </div>
    </div>
    <div v-if="!user" class="updates">
      <div class="container">
        <h2>走过路过不要错过，注册一个账号吧！</h2>
        <router-link :to="{name:'Login'}" class="router-button">
          注册<Arrow class="arrow arrow-light"/>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import Arrow from "../assets/Icons/arrow-right-light.svg"
import BlogPost from '../components/BlogPost.vue'
import BlogCard from '../components/BlogCard.vue'
export default {
  name: "Home",
  components: { BlogPost, BlogCard, Arrow},
  data(){
    return {
      welcomeScreen:{
        title: '人如果没有梦想，那和咸鱼有什么区别呢？',
        blogPost: '志同道合，奋斗而实干',
        welcomeScreen: true,
        photo: 'http://120.55.13.230/blog-express/static/代码.jpg'
      },
    }
  },
  computed:{
    blogPostsFeed() {
      return this.$store.getters.blogPostsFeed
    },
    blogPostsCards() {
      return this.$store.getters.blogPostsCards
    },
    user() {
      return this.$store.state.user
    }
  }
};
</script>
<style lang="scss" scoped>
.blog-card-wrap {
  h3 {
    font-weight: 300;
    font-size: 28px;
    margin-bottom: 32px;
  }
}
.updates{
  .container {
    padding: 100px 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    @media(min-width: 800px){
      padding: 125px 25px;
      flex-direction: row;
    }
  }
  .router-button{
    display: flex;

    font-size: 14px;
    text-decoration: none;
    letter-spacing: 1px;
    @media(min-width: 800px){
      margin-left: auto;
      width: 120px;
    }
  }
  h2{
    font-weight: 300;
    font-size: 32px;
    min-width: 325px;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    @media(min-width: 800px){
      text-align: initial;
      font-size: 40px;
    }
  }
}
</style>
